<template>
	<el-card>
		<div class="arrange-panel-header">
			<div class="class-profiles">
				<div class="title">{{heardTitle}}</div>
			</div>
			<el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
		</div>
		<div style="margin-top: 24px;">
			<div class="edu-opertion-bar">
				<div class="float-left">
					<el-input
						v-model="directionForm.keyWord"
						:placeholder="$t('culture.profession.searchForDirection')"
						style="width:250px"
						@keyup.enter.native="getDirMaintens()"
					>
						<i
							class="el-icon-search"
							slot="suffix"
							style="margin-top:10px;cursor:pointer"
							@click="getDirMaintens()"
						></i>
					</el-input>
				</div>
				<div class="float-right">
					<el-button @click="exportDirrection" type="primary">{{$t('message.export')}}</el-button>
					<el-button @click="addDirection" type="primary">{{$t('message.add')}}</el-button>
				</div>
			</div>
			<el-table :data="table" size="mini" stripe tooltip-effect="light">
				<!--  <edu-table-column type="selection" width="30"></edu-table-column> -->
				<edu-table-column type="index" width="80" :label="$t('message.order')" align="center"></edu-table-column>
				<edu-table-column :label="$t('culture.profession.directionCode')">
					<template slot-scope="scope">{{scope.row.code}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('culture.profession.directionName')">
					<template slot-scope="scope">
						<span :title="scope.row.name">{{scope.row.name}}</span>
					</template>
				</edu-table-column>
				<edu-table-column :label="$t('culture.profession.directionNameEn')">
					<template slot-scope="scope">
						<span :title="scope.row.nameEn">{{scope.row.nameEn}}</span>
					</template>
				</edu-table-column>
				<edu-table-column :label="$t('label.trainingLevel')">
					<template slot-scope="scope">{{scope.row.trainingLevelI18n}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('label.college')">
					<template slot-scope="scope">{{scope.row.facultyI18n}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('culture.profession.proCodeName')">
					<template slot-scope="scope">
						<span :title="scope.row.professionName">{{scope.row.professionName}}</span>
					</template>
				</edu-table-column>

				<edu-table-column :label="$t('message.operating')">
					<template slot-scope="scope">
						<el-button type="text" @click="editDirection(scope.row)" size="mini">{{$t('message.edit')}}</el-button>
						  <!-- <el-button type="text"  v-if="functions['delete_workflow']" v-if="functions['edit_workflow']" size="mini">{{$t('message.edit')}}</el-button> -->
						<el-button type="text" @click="delDir(scope.row)" size="mini">{{$t('message.delete')}}</el-button>
					</template>
				</edu-table-column>
			</el-table>
			<div class="edu-pagination">
				<div class="float-right">
					<el-pagination
						@size-change="onPageSizeChange_d"
						@current-change="onCurrentPageChange_d"
						:current-page="directionForm.pageNum_"
						:page-sizes="[20,50,100,500,1000]"
						:page-size="directionForm.pageSize_"
						layout="total, sizes, prev, pager, next, jumper"
						:total="directionForm.total_"
						style="float: right;margin:10px 60px 0 0;"
					></el-pagination>
				</div>
			</div>

			<!-- 编辑/新增方向对话框 -->
			<el-dialog
				:title="addDirecTitle"
				width="700px"
				height="330px"
				:visible.sync="editPositinDialog"
				@close="resetFormValidate_d()"
				:close-on-click-modal="false"
				:close-on-press-escape="false"
				v-drag-dialog
			>
				<el-form
					:model="directionModel"
					ref="directionModel"
					:rules="directionRules"
					label-direction="left"
					label-width="100px"
					label-suffix=":"
				>
					<el-row>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.directionCode')" prop="code">
								<el-input
									v-if="isEdit"
									:disabled="isEdit"
									v-model="directionModel.code"
									:placeholder="$t('culture.rules.plsInputDirCode')"
									style="width:100%"
								/>
								<div v-else>
									<el-input
										v-model="directionModel.code"
										:placeholder="$t('culture.rules.plsInputDirCode')"
										style="width:70%"
									/>
									 <el-button type="text" style="width:25%" @click="autoCode">自动获取</el-button>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.directionName')" prop="name">
								<el-input
									v-model="directionModel.name"
									:placeholder="$t('culture.rules.plsInputDirName')"
									style="width: 100%;"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.directionNameEn')" prop="nameEn">
								<el-input
									v-model="directionModel.nameEn"
									:placeholder="$t('culture.rules.plsInputDirNameEN')"
									style="width: 100%;"
									maxlength="32"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.proCode')">
								<el-input :disabled="true" v-model="directionModel.professionCode" style="width: 100%;" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.proCodeName')">
								<el-input :disabled="true" v-model="directionModel.professionName" style="width: 100%;" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item :label="$t('culture.profession.proCodeNameEn')">
								<el-input :disabled="true" v-model="directionModel.professionNameEn" style="width: 100%;" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item :label="$t('message.remark')">
								<el-input
									v-model="directionModel.remark"
									type="textarea"
									:rows="3"
									style="width:100%"
									maxlength="255"
								></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<span slot="footer">
					<el-button @click="editPositinDialog = false">{{$t('message.cancel')}}</el-button>
					<el-button type="primary" @click="confirmdirection">{{ $t('message.confirm') }}</el-button>
				</span>
			</el-dialog>
		</div>
	</el-card>
</template>
<script>
import {
	findDirMaintenList,
	editDirMainten,
	addDirMainten,
	findDirMaintenDetail,
	exportDirMainten,
	logicalDelDirection,
	checkDirection,
	getCode
} from "common/src/api/culture/campusProfession";
import UTILS from "common/src/utils/utils";

export default {
	name: "DirectionComponent",
	props: {
		currentProfession:{
			default: null
		}
	},
	data() {
		var validateCode = (rule, value, callback) => {
            var regex = /^[A-Za-z0-9\(\)\s\S]{0,32}$/;
            if (regex.test(value)) {
                callback();
            } else {
                callback(new Error(this.$t("professions.numberMaxLimited")));
            }
        };
        var validateName = (rule, value, callback) => {
            var regex = /^[\u4E00-\u9FA50-9\(\)\s\S]{2,30}$/;
            if (regex.test(value)) {
                callback();
            } else {
                callback(new Error(this.$t("professions.wordLimited")));
            }
        };
		return {
			directionForm: {
				pageNum_: 1,
				pageSize_: 20,
				total_: 0,
				grade: "",
				professionCode: "",
				keyWord: ""
			},
			directionModel: {
				grade: "",
				code: "",
				name: "",
				nameEn: "",
				startTime: "",
				failureTime: "",
				remark: "",
				professionCode: "",
				professionName: "",
				professionNameEn: "",
				faculty: "",
				trainingLevel: "",
				facultyI18n: "",
				trainingLevelI18n: ""
			},
			direcTitle: "",
			addDirecTitle: "",
			isEdit: false,
			editPositinDialog: false,
			directionRules: {
				code: [
					{
						required: true,
						message: this.$t("culture.rules.directionCodeReq"),
						trigger: "blur"
					},
					{
						validator: validateCode,
						trigger:"blur"
					}
				],
				name: [
					{
						required: true,
						message: this.$t("culture.rules.directionNameReq"),
						trigger: "blur"
					},
					{
						validator: validateName,
						trigger:"blur"
					}
				],
				nameEn: [
					{
						required:false,
						message: "请输入方向英文名称",	
						trigger:"change"
					}
				],
				startTime: [
					{
						required: true,
						message: this.$t("culture.rules.plsChooseStartTime"),
						trigger: "blur"
					}
				]
			}
		};
	},
	created() {},
	computed: {},
	mounted(){
		this.getDirMaintens(this.currentProfession);
	},
	methods: {
		exportDirrection() {
			let data = Object.assign({}, this.directionForm);
			exportDirMainten(data);
		},

		onPageSizeChange_d(size) {
			this.directionForm.pageSize_ = size;
			this.getDirMaintens();
		},
		onCurrentPageChange_d(currentPage) {
			this.directionForm.pageNum_ = currentPage;
			this.getDirMaintens();
		},
		getDirMaintens(data) {
			if (data) {
				this.directionForm.grade = data.grade;
				this.directionForm.professionCode = data.professionCode;
				this.heardTitle = data.professionName;
				this.directionModel.grade = data.grade;
				this.directionModel.professionCode = data.professionCode;
				this.directionModel.professionName = data.professionName;
				this.directionModel.professionNameEn = data.professionNameEn;
			}

			findDirMaintenList(this.directionForm).then(res => {
				if (res.code == 200) {
					this.table = res.data.list;
					this.directionForm.pageNum_ = res.data.pageNum_;
					this.directionForm.pageSize_ = res.data.pageSize_;
					this.directionForm.total_ = res.data.total_;
				}
			});
		},
		/* 
    let postData=_.cloneDeep(this.queryForm);
        postData.grade=Number(postData.grade); */
		confirmdirection() {
			this.$refs.directionModel.validate(valid => {
				if (!valid) {
					return;
				}
				let obj = UTILS.clone(this.directionModel);
				obj.startTime = this.directionModel.startTime / 1000;
				obj.failureTime = this.directionModel.failureTime / 1000;
				if (this.isEdit) {
					editDirMainten(obj).then(res => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: this.$t("message.editSuccess")
							});
							this.editPositinDialog = false;
							this.getDirMaintens();
						}
					});
				} else {
					addDirMainten(obj).then(res => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: this.$t("message.addSuccess")
							});
							this.editPositinDialog = false;
							this.getDirMaintens();
						}
					});
				}
			});
		},

		addDirection() {
			this.isEdit = false;
			this.resetDirec();
			this.addDirecTitle =
				this.$t("culture.profession.addDirection") +
				"(" +
				this.heardTitle +
				")";
			this.editPositinDialog = true;
		},
		resetFormValidate_d() {
			this.$refs.directionModel.resetFields();
		},

		editDirection(data) {
			this.isEdit = true;
			this.addDirecTitle =
				this.$t("culture.profession.editDirection") +
				"(" +
				this.heardTitle +
				")";
			let param = {};
			param.grade = data.grade;
			param.professionCode = data.professionCode;
			param.code = data.code;
			findDirMaintenDetail(param).then(res => {
				if (res.code == 200) {
					res.data.startTime = res.data.startTime * 1000;
					res.data.failureTime = res.data.failureTime * 1000;
					this.directionModel = res.data;
				}
			});
			this.editPositinDialog = true;
		},
		resetDirec() {
			this.directionModel.code = "";
			this.directionModel.name = "";
			this.directionModel.nameEn = "";
			this.directionModel.startTime = "";
			this.directionModel.failureTime = "";
			this.directionModel.remark = "";
		},

		delDir(data) {
			 this.$delConfirm().then(() => {
				//判断该方向是否被培养方案/计划绑定
				checkDirection(data.grade,data.professionCode,data.code).then(res=>{
					if(res.code==200&&res.data){
						//逻辑删除方向
						logicalDelDirection(
							data.grade,
							data.professionCode,
							data.code
						).then(res => {
							if (res.code == 200) {
								this.$message({
									type: "success",
									message: this.$t("message.deleteSuccess")
								});
								this.getDirMaintens();
							}
						});
					}else{
						this.$message({
							type: "warning",
							message: '该方向已被培养方案或培养计划绑定，无法直接删除'
						});
					}		
				})				
			});
		},
		back() {
			//this.resetFormValidate();
			this.$emit("back", "main");
		},
		autoCode(){
			getCode(2,this.directionModel.professionCode,this.directionModel.grade).then(res=>{
				if(res.code==200){
					this.directionModel.code=res.data;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.arrange-panel-header {
	height: 56px;
	border-bottom: 2px solid #dcdfe6;
	cursor: default;
	.title {
		font-size: 20px;
		color: #000;
		font-weight: bold;
	}
	.class-profiles {
		float: left;
		width: 40%;
		div {
			padding: 5px 0;
		}
	}
}
</style>

